<template>
  <view>
    <!-- 搜索框 -->
    
    <!-- 分类选择 -->
    <view class="cate-container">
      <!-- 左侧一级分类 -->
     <!-- 左侧一级分类 -->
    <!-- 左侧一级分类 -->
  <!-- 左侧一级分类 -->
  <scroll-view class="cate-left" scroll-y="true" :style="{height: wh+'px'}" >
    <view
      :class="['cate-left-item', i===active ? 'active':'']"
      v-for="(item, i) in cateList" :key="i"
      @click="changeActive(i)"
    >
      {{item.cat_name}}
    </view>
  </scroll-view>
      <!-- 右侧二级分类 -->
 <!-- 右侧二级分类 -->
 <scroll-view class="cate-right" scroll-y="true" :style="{height: wh+'px'}"  :scroll-top="scrollTop" >
   <!-- 二级分类item -->
   <view class="cate-right-item" v-for="(item, i) in cateLevel2" :key="i">
     <!-- 二级分类title -->
     <view class="cate-right-item-title">
       /{{item.cat_name}}/
     </view>
     <!-- 二级分类内容容器 -->
     <view class="cate-right-item-content">
       <!-- 二级分类每一项内容 -->
       <view class="cate-right-item-content-box" v-for="(item2, i2) in item.children" :key="i2"  @click="gotoGoodsList(item2)">
         <!-- 二级分类图片 -->
         <image :src="item2.cat_icon" mode="widthFix"></image>
         <!-- 二级分类名称 -->
         <text>{{item2.cat_name}}</text>
       </view>
     </view>
   </view>
 </scroll-view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        cateList: [],   // 分类数据列表
        wh: 0 ,// 窗口的可用高度 = 屏幕高度 - navigationBar高度 - tabBar 高度
        active: 0, // 左侧一级分类选中索引
         cateLevel2: [], // 二级分类列表
         scrollTop: 0// 滚动条距离顶部的距离
         
      };
    },
    onLoad() {
      // 获取页面可用高度
      // https://uniapp.dcloud.io/api/system/info?id=getsysteminfosync
      const sysInfo = uni.getSystemInfoSync()
      // 为wh赋值(windowHeight, 可使用窗口高度)
      this.wh = sysInfo.windowHeight
       this.getCateList() // 获取分类数据
      
    },
    methods: {
     async getCateList() { // 获取分类数据
        // 发起请求
        const { data: res } = await uni.$http.get('/categories')
        // 数据获取异常判断
        if (res.meta.status !== 200) return uni.$showMsg()
        // 保存数据到data中
        this.cateList = res.message
         this.cateLevel2 = res.message[0].children // 为二级分类赋值
      },
      changeActive(i) {  // 改变一级分类索引
         this.active = i
          this.cateLevel2 = this.cateList[i].children // 更新二级分类列表数据
           this.scrollTop = Math.random() // 更新右侧二级分类距离顶部距离
       },
       gotoGoodsList(goods){// 点击二级分类详情跳转到商品列表页
         uni.navigateTo({
           url: `/subpkg/goods_list/goods_list?cid=${goods.cat_id}`
         })
       }
       
       
       
       
       
  
  
   }
  }
</script>

<style lang="scss">
.cate-container {
  display: flex;
  .cate-left {
    width: 240rpx;
    .cate-left-item {
      line-height: 120px;
      background-color: #f7f7f7;
      text-align: center;
      font-size: 24rpx;
      // 激活项的样式
      &.active {
        background-color: #ffffff;
        position: relative;
        // 渲染激活项左侧的红色指示边线
        &::before {
          content: ' ';
          display: block;
          width: 6px;
          height: 60rpx;
          background-color: #c00000;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
  }
}
.cate-right {
  .cate-right-item {
    .cate-right-item-title{
      display: flex;
      justify-content: center;
      font-weight: bold;
      font-size: 24rpx;
      padding: 20rpx 0;
    }
    .cate-right-item-content {
      display: flex;
      flex-wrap: wrap;
      .cate-right-item-content-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 33.33%;
        padding: 20rpx;
        box-sizing: border-box;
        image {
          width: 100%;
        }
        text {
          font-size: 24rpx;
        }
      }
    }
  }
}
</style>
